<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body{
            text-align: center;
        }
        #myCanvas{
            background: pink;
        }


    </style>
</head>
<body>

<canvas id="myCanvas" width="500" height="500"></canvas>

</body>
<script type="text/javascript">
    window.onload = function () {
        var myCanvas = document.getElementById('myCanvas');
        var painting = myCanvas.getContext('2d');
        //目标图像  你已经放到上面的图片
        painting.beginPath();
        painting.fillStyle = 'blue';
        painting.fillRect(100,100,200,100);

        //分界线
        // painting.globalCompositeOperation = 'source-over';
        // painting.globalCompositeOperation = 'source-atop';
        // painting.globalCompositeOperation = 'source-in';
        // painting.globalCompositeOperation = 'source-out';
        // painting.globalCompositeOperation = 'destination-over';
        // painting.globalCompositeOperation = 'destination-atop';
        // painting.globalCompositeOperation = 'destination-in';
        painting.globalCompositeOperation = 'destination-out';

        //源图像  你打算放到画布上的图片
        painting.beginPath();
        painting.fillStyle = 'red';
        painting.fillRect(100,100,100,200);

     
    }
</script>
</html>